<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp } from 'vue'

    const app = createApp({
      setup() {
        const clean = (e) => {
          e.target.value = ''
        }

        const caps = (e) => {
          const val = e.target.value
          if (val.length === 0) return
          e.target.value = val[0].toUpperCase() + val.slice(1)
        }

        const upperHandler = (e) => {
          const val = e.target.value
          e.target.value = val.toUpperCase()
        }

        const lowerHandler = (e) => {
          const val = e.target.value
          e.target.value = val.toLowerCase()
        }

        // 点击鼠标左键，放大图片
        const magnifyPhoto = (e) => {
          e.target.style.width = '400px'
        }

        // 点击鼠标右键，缩小图片
        const shrinkPhoto = (e) => {
          e.target.style.width = '200px'
        }

        // 点击鼠标中键，让图片旋转 45deg
        const rotatePhoto = (e) => {
          e.target.style.transform = 'rotateZ(45deg)'
        }

        // 如果按下了 ctrl + 鼠标中键，则让图片旋转回去
        const resetRotatePhoto = (e) => {
          e.target.style.transform = 'rotateZ(0deg)'
        }

        return {
          clean,
          caps,
          upperHandler,
          lowerHandler,
          magnifyPhoto,
          shrinkPhoto,
          rotatePhoto,
          resetRotatePhoto
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <div id="app">
    <img src="./image/1.jpg" alt="" width="200" @click.left="magnifyPhoto" @click.right.prevent="shrinkPhoto"
      @click.middle="rotatePhoto" @click.ctrl.middle.exact="resetRotatePhoto">
    <hr>

    <input type="text" @keyup.esc="clean">

    <hr>
    <input type="text" @keyup.caps-lock="caps">

    <hr>
    <!-- .exact 表示精确匹配系统按键 -->
    <input type="text" @keyup.alt.u.exact="upperHandler" @keyup.alt.l.exact="lowerHandler">
  </div>
</body>

</html>